How to Highlight Your First Letter

Writing a new post is enjoyable but making it beautiful is even more exciting. You might have noticed in so many websites that the first letter of paragraphs has a unique style from the rest of the text. These are called initial caps. In CSS, there are varieties of initial caps which you can implement in your documents.

The key to this workaround is via span tag or first-letter pseudo-element. Here are the examples of how to implement initial caps to your content.

1. Span tag
This is my favorite method is I don’t need to mess with existing css file especially if I don’t use it regularly. Additional point where span tag is favorable is due to consistent results across browsers compared to pseudo-element.

<p>
<span style="float:left; color: #666; font-size:4.3em; padding-right: 5px;line-height:83%;">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...eu fugiat nulla pariatur.
</p>

This is how it should look:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Interesting? How if you want to use it regularly? Just use the above command but of course you can modify it to meet your requirements, and place it somewhere inside your css.

.firstletter {
float: left;
color: #666;
padding-right: 5px;
line-height: 83%;
}

This is how you call the styling into effect:

<p>
<span class="firstletter">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...eu fugiat nulla pariatur.
</p>

2. first-letter pseudo-element
This is the easiest method of creating initial caps. The problem with this method is that not all browsers supported it. Be sure to test this in the browsers your Web site supports. Additionally, you have to add the rules into your css file, adding more size to it but if you use initial caps regularly, this method is highly recommended.

<style type="text/css">
.firstletter:first-letter {
float: left;
color: #666;
padding-right: 5px;
line-height: 83%;
}
</style>

This is how you call the element into effect:

<p class="firstletter">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...eu fugiat nulla pariatur.
</p>

More information on pseudo-element from W3C.

digg reddit delicious stumbleupon technorati furl ma.gnolia
Does this post useful? Subscribe to RSS Feed for updates.
Posted on: July 6, 2008 | Under Blogging Basics, Tips & Tricks 
 

One Response to “How to Highlight Your First Letter”

  1. Highlighting your first capital letter « Better Wordpress..

Share your thoughts




Speak your mind